
<!--底部按钮-->
<div class="foot-fix-box">
    <a href="" class="foot-btn foot-btn-default">取消</a>
    <a href="javascript:void(0);" class="foot-btn foot-btn-primary btn-submit">确认</a>

</div>

<!--底部按钮-->
<script src="{{asset('front/js/zepto.min.js')}}"></script>
<script type="text/javascript">
var thumbs = '';   

    $('.btn-submit').on('click',function(){
        if($('input[name="category_id"]').val()==1 && $('#depart_id').val()=='') {
            alert('请选择商场');return;
        }
        var inputs = $("#form1 .weui-input");
        var validFields = 0;
        $.each(inputs,function(k,v){
           
            if($(this).prop('required')==true && $(this).val()=='') {
                validFields++;
                alert($(this).attr('placeholder'));return ;
            }
        });
        if(validFields) return false;
        var data = $('#form1').serialize();
        
        var url = "{{url('user/task/save')}}";
        $.post(url,data,function(rs){
           alert(rs.msg);
           
           window.setTimeout(function(){
            var redirct_url = "{{url('user/task')}}";
            window.location.href=redirct_url;
           },2000);
            
        })
        console.info(data);
    })

    $(function () {
       
        //上传
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        var maxSize = 1024 * 1024 * 10; // 10240KB，也就是 10MB
        var maxWidth = 1900;  // 图片最大宽度
        var maxCount = 5;// 最大上传图片数量

        //
        var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)">' +
            '</li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function (e) {
            files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var imgID = genGUID();
                var reader = new FileReader();
                var fileType = file.type;
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {

                    alert('该类型不允许上传' + fileType, "forbidden");
                    continue;
                }

                if (file.size > maxSize) {
                    alert("图片太大，不允许上传", "forbidden");
                    continue;
                }

                if ($('.weui-uploader__file').length >= maxCount) {
                    /*$('.weui-uploader__input-box').hide()*/
                    alert('最多只能上传' + maxCount + '张图片', "forbidden");
                    return;
                }


                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL(fileType, 0.8); //0.8指的是压缩80%

                        // 插入到预览区
                        $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));

                        var num = $('.weui-uploader__file').length;
                        $('#uploadCount').text(num);

                       
                        var url = "{{url('upload-base64')}}";
                        var data = {};
                        data.pic = base64;
                        data._token = $('meta[name="csrf-token"]').attr('content');
                        
                        
                        $.post(url,data,function(rs){
                            if(rs.status==true) {
                                thumbs = thumbs+rs.data+',';
                                $('#pics').val(thumbs); 
                            } else {
                                
                                return false;
                            }
                            console.info(thumbs);
                            
                        })

                       
                        
                        // 模拟上传进度
                        /* var progress = 0;
                         function uploading() {
                             $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                             if (progress < 100) {
                                 setTimeout(uploading, 30);
                             } else {
                                 $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                             }
                         }
                         setTimeout(uploading, 30);*/
                    };

                    img.src = e.target.result;


                    //这里实现上传
                    //$.ajax({});


                };
                reader.readAsDataURL(file);

            }
        });


        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });

        //删除图片
        $(".weui-gallery__del").click(function () {
            $uploaderFiles.find("li").eq(index).remove();
            var num = $('.weui-uploader__file').length;
            $('#uploadCount').text(num);
        });


        $("#btnsaveCharge").click(function () {


            //或者在这里实现批量上传, 不建议批量上传
        });

    });

    //生成guid
    function genGUID() {
        var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        return (G1 + G2);
    }

   

</script>
</body>
</html>